const miva = {
  tabBar: {
  	props: ['nowTabbar'],
  	data() {
  		return {
  			tabBarList: [{
  				title: '首页',
          icon: 'icon-shouye',
  				href: 'index',
  			},{
  				title: '书城',
  				icon: 'icon-shu',
  				href: 'bookCity',
  			},{
  				title: '论坛',
  				icon: 'icon-luntan',
  				href: 'bbsPage',
  			},{
  				title: '我的',
  				icon: 'icon-wode',
  				href: 'pages/aboutMe',
  			}],
  		}
  	},
  	template: (
  	`<div class="tabbar-container">
  		<div v-for="(temp, index) in tabBarList" @tap="index == nowTabbar ? '' : isApp(temp.href)" class="tabbar-item" :class="index == nowTabbar ? 'active' : '' ">
  			<i style="font-size:24px" class="mui-icon iconfont" :class="temp.icon || mui-icon-help "></i>
  			<div>{{temp.title}}</div>
  		</div>
  	</div>`),
  	mounted() {
  		const _this = this;
  		mui.plusReady(function() {
  			if(mui.os.plus) {
  				// 创建子页面
  				_this.initPluspage();
  			}
  		})
  	},
  	methods: {
  		isApp(uri) {
  			// 非plus环境,直接href跳转
  			if (!mui.os.plus) {
  				this.switchPage(uri);
  				return;
  			}

  			this.switchPluspage(uri)

  		},
  		initPluspage() {
  			let subpages = this.tabBarList;
  			let self = plus.webview.currentWebview();
  			let subpage_style = {
  				top: 0,
  			};

  			// if (mui.os.android) {
  			// 	if (plus.navigator.isImmersedStatusbar()) {
  			// 		subpage_style.top += plus.navigator.getStatusbarHeight();
  			// 	}
  			// }

  			if (mui.os.android) {
  				if (plus.navigator.isImmersedStatusbar()) {
  					document.querySelector('.mui-bar').style = 'padding-top: '+plus.navigator.getStatusbarHeight()+'px; height: ' +(plus.navigator.getStatusbarHeight()+44) + 'px';
  					document.querySelector('.mui-content').style = 'padding-top: ' +(plus.navigator.getStatusbarHeight()+44) + 'px';
  				}
  			}

  			for (let i = 0, len = subpages.length; i < len; i++) {
  				if (!plus.webview.getWebviewById(subpages[i].href)) {
  					let sub = plus.webview.create(subpages[i].href + '.html', subpages[i].href, subpage_style);
  					sub.hide();
  					self.append(sub)
  				}
  			}
  		},
  		switchPluspage(href) {
  			if (mui.os.ios) {
  	      plus.webview.show(href);
  	    }else {
  				if (href !== 'pages/aboutMe') {
  					plus.webview.show(href, 'fade-in', 300);
  				}else {
  					href = href + '.html';
  					mui.openWindow({url:href, id:'aboutMe', waiting: {autoShow: false}});
  				}
  	    }
  		},
  		switchPage(uri) {
  			let baseUri = './';
  			let href = baseUri + uri + '.html';
  			let options = {
  				waiting: {
  					autoShow: false
  				},
  			};
  			mui.openWindow(href, uri)
  		},
  	},
  },
  searchEntry: {
    props: ['signIn'],
    data() {
      return {
        keyWords:'',
      }
    },
    template: (
      `<div class="search-component-box">
        <div class="search-box">
          <div v-if="!signIn || signIn==0" @tap="gotoSearchPage" class="fakerInput">输入文学作品</div>
          <input v-if="signIn==1" type="text" v-model="keyWords" class="fakerInput" placeholder="输入文学作品" />
          <i class="mui-icon mui-icon-search"></i>
        </div>
        <span v-if="signIn==1" @tap="gotoSearchList" class="sign-button thouch-active">搜索</span>
        <span v-if="!signIn" @tap="gotoSearchPage" class="sign-button thouch-active">搜索</span>
        <span v-if="signIn==0" @tap="gotoSignIn" class="sign-button thouch-active">签到</span>
      </div>`
    ),
    created() {},
    mounted() {},
    watch: {
      keyWords() {
        // console.log(this);
      },
    },
    methods: {
      gotoSignIn(uid) {

        mui.openWindow({
          url: mivaUtils.checkLogin('pages/signIn.html'),
          id: 'signIn',
          extras: {
            uid: 123
          },
        })
      },
      gotoSearchPage() {
        // console.log(this.signIn);
        let baseUri = 'pages/';
        let uri = 'searchPage.html';
        if (this.signIn == 0) {
          uri = baseUri + uri;
        }
        mui.openWindow({
          url: uri,
          id: 'searchPage',
          extras: {},
        })
      },
      gotoSearchList() {
        // console.log(123);
        const _this = this;
        mui.openWindow({
          url: 'searchList.html?kw=' + _this.keyWords,
          id: 'searchList',
          extras: {
            kw: _this.keyWords,
          },
        })
      },
    },
  },
  swiperItem: {
    props: ['binnerData', 'swiperId', 'swiperSetting'],
    data() {
      return {
        binnerList: '',
        _thisSwiper: null,
      }
    },
    template: (
      `<div class="swiper-container index-swiper" :id="swiperId">
        <div class="swiper-wrapper">
          <div v-for="temp in binnerList" class="swiper-slide">
            <div class="swiper-img-box">
              <img :src="temp.img_path || temp.cover || temp || 'https://placehold.it/1600x900' " alt="">
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>`
    ),
    mounted() {
      const _this = this;

      _this.createdSwiper();

      setTimeout(function() {
        _this.binnerList = _this.binnerData || ['https://placehold.it/1600x900', 'https://placehold.it/1600x900', 'https://placehold.it/1600x900'];
      }, 200)
    },
    watch: {
      binnerList() {
        const _this = this;
        _this.$nextTick(function() {
          _this._thisSwiper.init();
        })
      },
    },
    methods: {
      createdSwiper() {
        const _this = this;
        let swiperId = _this.swiperId || '.swiper-container';
        let options = {
          init: false,
          loop: true,
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
          },
        };

        _this._thisSwiper = new Swiper(swiperId, options);
      },
    },
  },
  frameWorkBook: {
    props: ['type', 'bookData', 'frameTitle'],
    template: (
      `<div class="frame-work-book " :class="type == 4 ? 'frame-work-book1' : 'frame-work-book'+ type">
        <div v-if="type != 4" class="frame-title">{{frameTitle || '框架标题'}}</div>
        <div class="frame-body">
          <div @tap="type != 4 ? gotoDynamic(temp.id) : '' " v-for="(temp, index) in bookData || modelList" class="book-list">
            <div class="img-box"><img :src="temp.cover || 'https://placehold.it/190x250' " alt="" /></div>
            <div class="book-info">
              <div class="book-title">{{temp.novel ||'书的标题'}}<span v-if="index == 0 && type == 1 && temp.is_hot == 1" class="hot-tap">热销</span></div>
              <div class="book-type">{{temp.category_desc || temp.category || '书的/类型'}}</div>
              <span v-if="type == 3" class="hot-tap">限时免费</span>
              <div v-if="(index == 0 || type == 2) && type != 3" class="book-summary">{{temp.description ||'简介: 书的简介'}}</div>
            </div>
          </div>
        </div>
        <div @tap="gotoCheckMorePage" v-if="type != 4" class="get-more">查看更多 <i class="mui-icon mui-icon-navigate"></i></div>
      </div>`
    ),
    data() {
      return {
        modelList: this.type == 3 ? 6 : this.type == 4 ? 1 : 5,
      }
    },
    mounted() {
      // console.log(this.bookData);
    },
    methods: {
      gotoDynamic(num) {
        mui.openWindow({
          url: 'pages/bookDynamic.html?bookId='+num,
          id: 'bookDynamic',
          extras: {
            bookId: num,
          },
        })
      },
      gotoCheckMorePage(num) {
        mui.openWindow({
          url: 'pages/checkMorePage.html?bookId='+num,
          id: 'checkMorePage',
          extras: {
            bookId: num,
          },
        })
      }
    },
  },
  frameWorkComment: {
    props: ['commentList'],
    template: (
      `<div>
        <div v-if="commentList.length > 0" v-for="temp in commentList" class="comment-frame-box" :id="temp.id">
          <div class="user-info-box">
            <div class="img-box"><img :src="temp.avatar" alt="" /></div>
            <div class="user-info">
              <div class="info-top"><span class="uname">{{temp.nickname}}</span> <span class="user-lv">LV{{temp.user_id}}</span></div>
              <div class="info-btm"><div class="star-box"><i v-for="stars in parseInt(temp.star)" class="mui-icon mui-icon-star"></i></div> <span>{{new Date(temp.add_time*100).getDay()}}天前</span></div>
            </div>
            <div :class="temp%2 == 0 ? 'good-job-active' : '' "><i class="iconfont icon-praise"></i><span>{{temp.star}}</span></div>
          </div>
          <div class="comment-body">{{temp.comment}}</div>
        </div>
        <div v-if="commentList.length == 0"> 暂无评论</div>
      </div>`
    ),
    mounted() {
      // console.log(this.commentList);
    },
  },
  frameWorkInfomation: {
    props: ['type'],
    template: (
      `<div class="infomation-frame-box">
        <div class="infomation-title">栏目标题</div>
        <div class="infomation-body" :class="type == 3 ? 'infomation-body3' : '' ">
          <div v-for="temp in parseInt(type)" class="infomation-item">
            <div class="img-box"><img src="https://placehold.it/200x150" alt="" /></div>
            <div class="item-title">道具标题</div>
          </div>
        </div>
      </div>`
    ),
  },
  doubelModule: {
    props: ['doubelData'],
    template: (
      `<div class="doubel-module-box">
        <div class="doubel-left">
          <div class="top">{{doubelData.signnum || 0}}天</div>
          <div class="btm">累计签到</div>
        </div>
        <div class="doubel-right">
          <div class="top">{{doubelData.redpacket || 0}}</div>
          <div class="btm">累积红包</div>
        </div>
      </div>`
    ),
  },
  signInModule: {
    props: ['signinData'],
    template: (
      `<div>
        <div @tap="openTheList" class="signin-open">点击{{textBtn}}</div>
        <div class="signin-date-box" ref="signinDateBox"  style="height: 80px">
          <div v-for="(temp,index) in signinData" ref="signinItem" class="signin-date-item">
            <div class="top-date">{{index}}</div>
            <div class="signin-status"><img v-if="temp == 1" src="../img/success.png" alt="" /><i v-if="temp == 0" class="mui-icon mui-icon-closeempty"></i></div>
          </div>
        </div>
      </div>`
    ),
    data() {
      return {
        isOpen: false,
        textBtn: '展开',
      }
    },
    mounted() {

      // this.$nextTick(()=> {
      //   this.$emit('getItemHeight', this.$refs.signinItem[0].offsetHeight)
      // })
    },
    methods: {
      openTheList() {
        this.isOpen = !this.isOpen;
        if(this.isOpen) {
          this.$refs.signinDateBox.style = 'height: initial; box-shadow:none';
          this.textBtn = '关闭';
        }else {
          this.$refs.signinDateBox.style = 'height: 80px';
          this.textBtn = '展开';
        }
      },
    },
  },
};
